React useMemo Bog'liqliklari: Memoizatsiyaning Eng Yaxshi Amaliyotlarini O'zlashtirish

Veb-dasturlashning dinamik olamida, ayniqsa React ekotizimida, komponentlar ishlashini optimallashtirish juda muhimdir. Ilovalar murakkablashgani sari, keraksiz qayta renderlar sekin ishlaydigan foydalanuvchi interfeyslariga va ideal bo'lmagan foydalanuvchi tajribasiga olib kelishi mumkin. React-ning bunga qarshi kurashish uchun kuchli vositalaridan biri bu useMemo hook'idir. Biroq, undan samarali foydalanish uning bog'liqliklar massivini chuqur tushunishga bog'liq. Ushbu keng qamrovli qo'llanma useMemo bog'liqliklaridan foydalanishning eng yaxshi amaliyotlarini ko'rib chiqadi va sizning React ilovalaringizning global auditoriya uchun samarali va kengaytiriladigan bo'lishini ta'minlaydi.

React-da Memoizatsiyani Tushunish

useMemo tafsilotlariga sho'ng'ishdan oldin, memoizatsiya tushunchasining o'zini anglab olish muhimdir. Memoizatsiya - bu qimmat funksiya chaqiruvlari natijalarini saqlab qolish va bir xil kirish ma'lumotlari qayta yuzaga kelganda keshlangan natijani qaytarish orqali kompyuter dasturlarini tezlashtiradigan optimallashtirish texnikasi. Aslida, bu ortiqcha hisob-kitoblardan qochish haqida.

React-da memoizatsiya asosan komponentlarning keraksiz qayta renderlanishini oldini olish yoki qimmat hisob-kitoblar natijalarini keshlash uchun ishlatiladi. Bu, ayniqsa, holat o'zgarishlari, prop yangilanishlari yoki ota-komponentning qayta renderlanishi tufayli tez-tez qayta renderlar sodir bo'lishi mumkin bo'lgan funksional komponentlarda muhimdir.

useMemo'ning Roli

React-dagi useMemo hook sizga hisob-kitob natijasini memoizatsiya qilish imkonini beradi. U ikkita argument qabul qiladi:

1. Siz memoizatsiya qilmoqchi bo'lgan qiymatni hisoblaydigan funksiya.
2. Bog'liqliklar massivi.

React hisoblangan funksiyani faqat bog'liqliklardan biri o'zgarganda qayta ishga tushiradi. Aks holda, u avval hisoblangan (keshlangan) qiymatni qaytaradi. Bu quyidagilar uchun juda foydali:

• Qimmat hisob-kitoblar: Murakkab ma'lumotlarni manipulyatsiya qilish, filtrlash, saralash yoki og'ir hisob-kitoblarni o'z ichiga olgan funksiyalar.
• Referensial tenglik: Ob'ekt yoki massiv prop'lariga tayanadigan bola komponentlarning keraksiz qayta renderlanishini oldini olish.

useMemo Sintaksisi

useMemo uchun asosiy sintaksis quyidagicha:

            const memoizedValue = useMemo(() => {
  // Bu yerda qimmat hisob-kitob
  return computeExpensiveValue(a, b);
}, [a, b]);
            

              
                Copy
              
            
          

Bu yerda, computeExpensiveValue(a, b) - bu biz natijasini memoizatsiya qilmoqchi bo'lgan funksiya. [a, b] bog'liqliklar massivi React-ga qiymatni faqat a yoki b renderlar orasida o'zgarganda qayta hisoblashni aytadi.

Bog'liqliklar Massivining Hal Qiluvchi Roli

Bog'liqliklar massivi useMemo'ning yuragidir. U memoizatsiya qilingan qiymat qachon qayta hisoblanishi kerakligini belgilaydi. To'g'ri aniqlangan bog'liqliklar massivi ham ishlashni yaxshilash, ham to'g'rilik uchun zarurdir. Noto'g'ri aniqlangan massiv quyidagilarga olib kelishi mumkin:

• Eskirgan ma'lumotlar: Agar bog'liqlik qoldirib ketilsa, memoizatsiya qilingan qiymat kerak bo'lganda yangilanmasligi mumkin, bu esa xatoliklarga va eskirgan ma'lumotlarning ko'rsatilishiga olib keladi.
• Ishlash samaradorligining yo'qligi: Agar bog'liqliklar keragidan ko'ra tez-tez o'zgarsa yoki hisob-kitob haqiqatan ham qimmat bo'lmasa, useMemo sezilarli ishlash afzalligini bermasligi yoki hatto qo'shimcha yuklama qo'shishi mumkin.

Bog'liqliklarni Aniqlashning Eng Yaxshi Amaliyotlari

To'g'ri bog'liqliklar massivini yaratish puxta o'ylashni talab qiladi. Mana ba'zi asosiy eng yaxshi amaliyotlar:

1. Memoizatsiya Qilingan Funksiyada Ishlatilgan Barcha Qiymatlarni Kiriting

Bu oltin qoida. Memoizatsiya qilingan funksiya ichida o'qiladigan har qanday o'zgaruvchi, prop yoki holat bog'liqliklar massiviga kiritilishi kerak. React-ning linting qoidalari (ayniqsa react-hooks/exhaustive-deps) bu yerda bebaho. Ular sizni biror bog'liqlikni o'tkazib yuborsangiz, avtomatik ravishda ogohlantiradi.

Misol:

            function MyComponent({ user, settings }) {
  const userName = user.name;
  const showWelcomeMessage = settings.showWelcome;

  const welcomeMessage = useMemo(() => {
    // Bu hisob-kitob userName va showWelcomeMessage'ga bog'liq
    if (showWelcomeMessage) {
      return `Xush kelibsiz, ${userName}!`;
    } else {
      return "Xush kelibsiz!";
    }
  }, [userName, showWelcomeMessage]); // Ikkalasi ham kiritilishi shart

  return (
    

      
{welcomeMessage}
      {/* ... boshqa JSX */}
    
  );
}
            

              
                Copy
              
            
          

Ushbu misolda userName va showWelcomeMessage ikkalasi ham useMemo qayta chaqiruvida ishlatiladi. Shuning uchun ular bog'liqliklar massiviga kiritilishi kerak. Agar bu qiymatlardan biri o'zgarsa, welcomeMessage qayta hisoblanadi.

2. Ob'ektlar va Massivlar Uchun Referensial Tenglikni Tushuning

Primitivlar (satrlar, raqamlar, mantiqiy qiymatlar, null, undefined, belgilar) qiymati bo'yicha taqqoslanadi. Biroq, ob'ektlar va massivlar referens (havola) bo'yicha taqqoslanadi. Bu shuni anglatadiki, agar ob'ekt yoki massiv bir xil tarkibga ega bo'lsa ham, agar u yangi nusxa bo'lsa, React uni o'zgarish deb hisoblaydi.

1-Stsenariy: Yangi Ob'ekt/Massiv Literalini O'tkazish

Agar siz yangi ob'ekt yoki massiv literalini to'g'ridan-to'g'ri memoizatsiya qilingan bola komponentga prop sifatida o'tkazsangiz yoki uni memoizatsiya qilingan hisob-kitob ichida ishlatsangiz, bu ota-komponentning har bir renderida qayta render yoki qayta hisoblashni ishga tushiradi va memoizatsiya afzalliklarini yo'qqa chiqaradi.

            function ParentComponent() {
  const [count, setCount] = React.useState(0);

  // Bu har bir renderda YANGI ob'ekt yaratadi
  const styleOptions = { backgroundColor: 'blue', padding: 10 };

  return (
    

       setCount(count + 1)}>Oshirish
      
      {/* Agar ChildComponent memoizatsiya qilingan bo'lsa, u keraksiz qayta renderlanadi */}
    
  );
}

const ChildComponent = React.memo(({ data }) => {
  console.log('ChildComponent render qilindi');
  return 
Bola
;
});
            

              
                Copy
              
            
          

Buning oldini olish uchun, agar u tez-tez o'zgarmaydigan prop yoki holatdan olingan bo'lsa, yoki u boshqa hook uchun bog'liqlik bo'lsa, ob'ekt yoki massivning o'zini memoizatsiya qiling.

Ob'ekt/massiv uchun useMemo ishlatish misoli:

            function ParentComponent() {
  const [count, setCount] = React.useState(0);
  const baseStyles = { padding: 10 };

  // Agar uning bog'liqliklari (masalan, baseStyles) tez-tez o'zgarmasa, ob'ektni memoizatsiya qiling.
  // Agar baseStyles prop'lardan olingan bo'lsa, u bog'liqliklar massiviga kiritilgan bo'lardi.
  const styleOptions = React.useMemo(() => ({
    ...baseStyles, // baseStyles barqaror yoki o'zi memoizatsiya qilingan deb faraz qilamiz
    backgroundColor: 'blue'
  }), [baseStyles]); // Agar baseStyles literal bo'lmasa yoki o'zgarishi mumkin bo'lsa, uni kiriting

  return (
    

       setCount(count + 1)}>Oshirish
      
    
  );
}

const ChildComponent = React.memo(({ data }) => {
  console.log('ChildComponent render qilindi');
  return 
Bola
;
});
            

              
                Copy
              
            
          

Ushbu to'g'rilangan misolda styleOptions memoizatsiya qilingan. Agar baseStyles (yoki baseStyles nimaga bog'liq bo'lsa) o'zgarmasa, styleOptions bir xil nusxada qoladi va ChildComponent'ning keraksiz qayta renderlanishini oldini oladi.

3. Har bir Qiymatda `useMemo` Ishlatishdan Saqlaning

Memoizatsiya bepul emas. U keshlangan qiymatni saqlash uchun xotira yuklamasini va bog'liqliklarni tekshirish uchun kichik hisoblash xarajatini o'z ichiga oladi. useMemo'dan oqilona foydalaning, faqat hisob-kitob aniq qimmat bo'lganda yoki optimallashtirish maqsadlarida (masalan, React.memo, useEffect yoki boshqa hook'lar bilan) referensial tenglikni saqlash kerak bo'lganda.

useMemo'ni qachon ishlatmaslik kerak:

• Juda tez bajariladigan oddiy hisob-kitoblar.
• Allaqachon barqaror bo'lgan qiymatlar (masalan, tez-tez o'zgarmaydigan primitiv prop'lar).

Keraksiz useMemo misoli:

            function SimpleComponent({ name }) {
  // Bu hisob-kitob ahamiyatsiz va memoizatsiyaga muhtoj emas.
  // useMemo'ning yuklamasi foydasidan kattaroq bo'lishi mumkin.
  const greeting = `Salom, ${name}`;

  return 
{greeting}
;
}
            

              
                Copy
              
            
          

4. Hosilaviy Ma'lumotlarni Memoizatsiya Qiling

Keng tarqalgan usul - mavjud prop yoki holatlardan yangi ma'lumotlarni hosil qilish. Agar bu hosila hisoblash jihatidan intensiv bo'lsa, bu useMemo uchun ideal nomzoddir.

Misol: Katta Ro'yxatni Filtrlash va Saralash

            function ProductList({ products }) {
  const [filterText, setFilterText] = React.useState('');
  const [sortOrder, setSortOrder] = React.useState('asc');

  const filteredAndSortedProducts = useMemo(() => {
    console.log('Mahsulotlar filtrlanmoqda va saralanmoqda...');
    let result = products.filter(product =>
      product.name.toLowerCase().includes(filterText.toLowerCase())
    );

    result.sort((a, b) => {
      if (sortOrder === 'asc') {
        return a.price - b.price;
      } else {
        return b.price - a.price;
      }
    });
    return result;
  }, [products, filterText, sortOrder]); // Barcha bog'liqliklar kiritilgan

  return (
    

       setFilterText(e.target.value)}
      />
       setSortOrder(e.target.value)}>
        Narx: Pastdan Yuqoriga
        Narx: Yuqoridan Pastga
      
      

        {filteredAndSortedProducts.map(product => (
          

            {product.name} - ${product.price}
          
        ))}
      
    
  );
}
            

              
                Copy
              
            
          

Ushbu misolda, potensial katta mahsulotlar ro'yxatini filtrlash va saralash ko'p vaqt talab qilishi mumkin. Natijani memoizatsiya qilish orqali, biz bu operatsiya faqat products ro'yxati, filterText yoki sortOrder haqiqatda o'zgarganda ishga tushishini ta'minlaymiz, ProductList'ning har bir qayta renderida emas.

5. Funksiyalarni Bog'liqlik Sifatida Ishlatish

Agar sizning memoizatsiya qilingan funksiyangiz komponent ichida aniqlangan boshqa funksiyaga bog'liq bo'lsa, u funksiya ham bog'liqliklar massiviga kiritilishi kerak. Biroq, agar funksiya komponent ichida inline tarzda aniqlansa, u har bir renderda yangi referens oladi, xuddi literallar bilan yaratilgan ob'ektlar va massivlar kabi.

Inline tarzda aniqlangan funksiyalar bilan bog'liq muammolarni oldini olish uchun ularni useCallback yordamida memoizatsiya qilishingiz kerak.

useCallback va useMemo bilan misol:

            function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);

  // Ma'lumotlarni olish funksiyasini useCallback yordamida memoizatsiya qiling
  const fetchUserData = React.useCallback(async () => {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    setUser(data);
  }, [userId]); // fetchUserData userId'ga bog'liq

  // Foydalanuvchi ma'lumotlarini qayta ishlashni memoizatsiya qiling
  const userDisplayName = React.useMemo(() => {
    if (!user) return 'Yuklanmoqda...';
    // Foydalanuvchi ma'lumotlarini potensial qimmat qayta ishlash
    return `${user.firstName} ${user.lastName} (${user.username})`;
  }, [user]); // userDisplayName foydalanuvchi ob'ektiga bog'liq

  // Komponent yuklanganda yoki userId o'zgarganda fetchUserData'ni chaqiring
  React.useEffect(() => {
    fetchUserData();
  }, [fetchUserData]); // fetchUserData useEffect uchun bog'liqlikdir

  return (
    

      
{userDisplayName}
      {/* ... boshqa foydalanuvchi tafsilotlari */}
    
  );
}
            

              
                Copy
              
            
          

Ushbu stsenariyda:

• fetchUserData useCallback bilan memoizatsiya qilingan, chunki u bola komponentlarga uzatilishi mumkin bo'lgan yoki bog'liqliklar massivida (useEffect'dagi kabi) ishlatilishi mumkin bo'lgan hodisa ishlovchisi/funksiyasidir. U faqat userId o'zgarganda yangi referens oladi.
• userDisplayName useMemo bilan memoizatsiya qilingan, chunki uning hisob-kitobi user ob'ektiga bog'liq.
• useEffect fetchUserData'ga bog'liq. fetchUserData useCallback bilan memoizatsiya qilinganligi sababli, useEffect faqat fetchUserData'ning referensi o'zgarganda qayta ishga tushadi (bu faqat userId o'zgarganda sodir bo'ladi), bu esa ortiqcha ma'lumotlarni yuklashning oldini oladi.

6. Bog'liqliklar Massivini Qoldirish: useMemo(() => compute(), [])

Agar siz bog'liqliklar massivi sifatida bo'sh massiv [] ni taqdim etsangiz, funksiya faqat komponent yuklanganda bir marta bajariladi va natija cheksiz muddatga memoizatsiya qilinadi.

            const initialConfig = useMemo(() => {
  // Bu hisob-kitob faqat yuklanishda bir marta ishlaydi
  return loadInitialConfiguration();
}, []); // Bo'sh bog'liqliklar massivi

            

              
                Copy
              
            
          

Bu, haqiqatan ham statik bo'lgan va komponentning hayotiy sikli davomida hech qachon qayta hisoblanishi kerak bo'lmagan qiymatlar uchun foydalidir.

7. Bog'liqliklar Massivini Butunlay Qoldirish: useMemo(() => compute())

Agar siz bog'liqliklar massivini butunlay qoldirsangiz, funksiya har bir renderda bajariladi. Bu memoizatsiyani amalda o'chirib qo'yadi va odatda juda aniq, kam uchraydigan holatlardan tashqari tavsiya etilmaydi. Bu funksional jihatdan funksiyani useMemo'siz to'g'ridan-to'g'ri chaqirishga tengdir.

Keng Tarqalgan Xatolar va Ulardan Qanday Qochish Mumkin

Eng yaxshi amaliyotlarni yodda tutgan holda ham, dasturchilar keng tarqalgan tuzoqlarga tushib qolishlari mumkin:

1-Xato: Bog'liqliklarni O'tkazib Yuborish

Muammo: Memoizatsiya qilingan funksiya ichida ishlatilgan o'zgaruvchini kiritishni unutish. Bu eskirgan ma'lumotlarga va yashirin xatoliklarga olib keladi.

Yechim: Har doim eslint-plugin-react-hooks paketini exhaustive-deps qoidasi yoqilgan holda ishlating. Bu qoida ko'pchilik o'tkazib yuborilgan bog'liqliklarni aniqlaydi.

2-Xato: Haddan Tashqari Memoizatsiya

Muammo: useMemo'ni oddiy hisob-kitoblarga yoki yuklamaga arzimaydigan qiymatlarga qo'llash. Bu ba'zida ishlashni yomonlashtirishi mumkin.

Yechim: Ilovangizni profillang. Ishlashdagi muammoli joylarni aniqlash uchun React DevTools'dan foydalaning. Faqat foyda xarajatdan ustun bo'lganda memoizatsiya qiling. Memoizatsiyasiz boshlang va agar ishlash muammoga aylansa, uni qo'shing.

3-Xato: Ob'ektlar/Massivlarni Noto'g'ri Memoizatsiya Qilish

Muammo: Memoizatsiya qilingan funksiya ichida yangi ob'ekt/massiv literallarini yaratish yoki ularni avval memoizatsiya qilmasdan bog'liqlik sifatida o'tkazish.

Yechim: Referensial tenglikni tushuning. Agar ob'ektlar va massivlarni yaratish qimmat bo'lsa yoki ularning barqarorligi bola komponent optimizatsiyasi uchun muhim bo'lsa, ularni useMemo yordamida memoizatsiya qiling.

4-Xato: Funksiyalarni useCallback'siz Memoizatsiya Qilish

Muammo: Funksiyani memoizatsiya qilish uchun useMemo ishlatish. Bu texnik jihatdan mumkin bo'lsa-da (useMemo(() => () => {...}, [...])), funksiyalarni memoizatsiya qilish uchun useCallback idiomatik va semantik jihatdan to'g'riroq hook'dir.

Yechim: Funksiyaning o'zini memoizatsiya qilishingiz kerak bo'lganda useCallback(fn, deps)'dan foydalaning. Funksiyani chaqirish *natijasini* memoizatsiya qilishingiz kerak bo'lganda useMemo(() => fn(), deps)'dan foydalaning.

Qachon `useMemo` Ishlatish Kerak: Qaror Qabul Qilish Daraxti

useMemo'ni qachon qo'llashni hal qilishga yordam berish uchun quyidagilarni ko'rib chiqing:

1. Hisob-kitob hisoblash jihatidan qimmatmi?
   • Ha: Keyingi savolga o'ting.
   • Yo'q: useMemo'dan saqlaning.
2. Ushbu hisob-kitob natijasi bola komponentlarning keraksiz qayta renderlanishini oldini olish uchun renderlar davomida barqaror bo'lishi kerakmi (masalan, React.memo bilan ishlatilganda)?
   • Ha: Keyingi savolga o'ting.
   • Yo'q: useMemo'dan saqlaning (agar hisob-kitob juda qimmat bo'lmasa va siz har bir renderda undan qochishni xohlamasangiz, hatto bola komponentlar uning barqarorligiga bevosita bog'liq bo'lmasa ham).
3. Hisob-kitob prop yoki holatga bog'liqmi?
   • Ha: Barcha bog'liq prop va holat o'zgaruvchilarini bog'liqliklar massiviga kiriting. Hisob-kitobda yoki bog'liqliklarda ishlatiladigan ob'ektlar/massivlar, agar ular inline yaratilgan bo'lsa, ham memoizatsiya qilinganligiga ishonch hosil qiling.
   • Yo'q: Agar hisob-kitob haqiqatan ham statik va qimmat bo'lsa, bo'sh bog'liqliklar massivi [] uchun mos bo'lishi mumkin yoki agar u haqiqatan ham global bo'lsa, komponentdan tashqariga ko'chirilishi mumkin.

React Ishlashi Uchun Global Mulohazalar

Global auditoriya uchun ilovalar yaratishda ishlash samaradorligi bilan bog'liq mulohazalar yanada muhimroq bo'ladi. Dunyo bo'ylab foydalanuvchilar ilovalarga tarmoq sharoitlari, qurilma imkoniyatlari va geografik joylashuvlarning keng spektridan kirishadi.

• Turli xil tarmoq tezliklari: Sekin yoki beqaror internet aloqalari optimallashtirilmagan JavaScript va tez-tez qayta renderlarning ta'sirini kuchaytirishi mumkin. Memoizatsiya mijoz tomonida kamroq ish bajarilishini ta'minlashga yordam beradi, bu esa cheklangan o'tkazuvchanlikka ega foydalanuvchilar uchun yuklamani kamaytiradi.
• Turli xil qurilma imkoniyatlari: Barcha foydalanuvchilar ham eng so'nggi yuqori unumdorlikdagi uskunalarga ega emas. Kam quvvatli qurilmalarda (masalan, eski smartfonlar, byudjet noutbuklar) keraksiz hisob-kitoblarning yuklamasi sezilarli darajada sekin ishlashga olib kelishi mumkin.
• Mijoz tomonida renderlash (CSR) va Server tomonida renderlash (SSR) / Statik Sayt Generatsiyasi (SSG): Garchi useMemo asosan mijoz tomonida renderlashni optimallashtirsa-da, uning SSR/SSG bilan birgalikdagi rolini tushunish muhimdir. Masalan, server tomonida olingan ma'lumotlar prop sifatida uzatilishi mumkin va mijoz tomonida hosilaviy ma'lumotlarni memoizatsiya qilish muhimligicha qoladi.
• Xalqarolashtirish (i18n) va Mahalliylashtirish (l10n): Garchi useMemo sintaksisiga bevosita bog'liq bo'lmasa-da, murakkab i18n mantig'i (masalan, sanalar, raqamlar yoki valyutalarni mahalliy sozlamalarga qarab formatlash) hisoblash jihatidan intensiv bo'lishi mumkin. Ushbu operatsiyalarni memoizatsiya qilish ularning UI yangilanishlarini sekinlashtirmasligini ta'minlaydi. Masalan, katta ro'yxatdagi mahalliylashtirilgan narxlarni formatlash useMemo'dan sezilarli foyda keltirishi mumkin.

Memoizatsiyaning eng yaxshi amaliyotlarini qo'llash orqali siz joylashuvi yoki ishlatayotgan qurilmasidan qat'i nazar, hamma uchun yanada qulay va samarali ilovalarni yaratishga hissa qo'shasiz.

Xulosa

useMemo - bu hisoblash natijalarini keshlash orqali ishlashni optimallashtirish uchun React dasturchisining arsenalidagi kuchli vositadir. Uning to'liq salohiyatini ochishning kaliti uning bog'liqliklar massivini sinchkovlik bilan tushunish va to'g'ri amalga oshirishda yotadi. Eng yaxshi amaliyotlarga rioya qilish orqali – barcha kerakli bog'liqliklarni kiritish, referensial tenglikni tushunish, haddan tashqari memoizatsiyadan qochish va funksiyalar uchun useCallback'dan foydalanish – siz ilovalaringizning samarali va mustahkam bo'lishini ta'minlashingiz mumkin.

Yodda tuting, ishlashni optimallashtirish davomiy jarayondir. Har doim ilovangizni profillang, haqiqiy muammoli joylarni aniqlang va useMemo kabi optimallashtirishlarni strategik tarzda qo'llang. Ehtiyotkorlik bilan qo'llanilganda, useMemo sizga tezroq, sezgirroq va kengaytiriladigan, butun dunyo bo'ylab foydalanuvchilarni xursand qiladigan React ilovalarini yaratishga yordam beradi.

Asosiy xulosalar:

• Qimmat hisob-kitoblar va referensial barqarorlik uchun useMemo'dan foydalaning.
• Memoizatsiya qilingan funksiya ichida o'qilgan BARCHA qiymatlarni bog'liqliklar massiviga kiriting.
• ESLint exhaustive-deps qoidasidan foydalaning.
• Ob'ektlar va massivlar uchun referensial tenglikka e'tibor bering.
• Funksiyalarni memoizatsiya qilish uchun useCallback'dan foydalaning.
• Keraksiz memoizatsiyadan saqlaning; kodingizni profillang.

useMemo va uning bog'liqliklarini o'zlashtirish - global foydalanuvchilar bazasiga mos keladigan yuqori sifatli, samarali React ilovalarini yaratish yo'lidagi muhim qadamdir.